<template>
	<view class="safety-container">
		<CommonBack title="安全中心" @back="back"></CommonBack>
		<!-- 用户信息 -->
		<view class="user-info">
			<view class="info-item">
				<text>当前帐号</text>
				<text style="margin-left: 40rpx;">{{username}}</text>
			</view>
			<view class="info-item">
				<text>修改密码</text>
			</view>
			<view class="info-item">
				<u--input type="password" style="margin-bottom: 30rpx;" shape="circle" placeholder="请输入原密码"
					v-model="passwordForm.password" suffixIcon="edit-pen" :suffixIconStyle="suffixIconStyle"></u--input>
			</view>
			<view class="info-item">
				<u--input type="password" style="margin-bottom: 30rpx;" shape="circle" placeholder="请输入新密码"
					v-model="passwordForm.newPassword" suffixIcon="edit-pen" :suffixIconStyle="suffixIconStyle">
				</u--input>
			</view>
			<view class="info-item">
				<u--input type="password" style="margin-bottom: 30rpx;" shape="circle" placeholder="请再次输入新密码"
					v-model="passwordForm.aginPassword" suffixIcon="edit-pen" :suffixIconStyle="suffixIconStyle">
				</u--input>
			</view>
			<view class="info-item">
				<view class="save" @click="submit">保存</view>
			</view>
			<view class="info-item">
				<view class="save" @click="closeUser">账号注销</view>
			</view>
		</view>
		<u-modal :buttonReverse="true" cancelText="取消" :showCancelButton="true" :show="show" @confirm="confirm"
			ref="uModal" :asyncClose="true" content="您确定要注销账号？"></u-modal>
	</view>
</template>

<script>
	import CommonBack from "../../components/CommonBack.vue"
	import {
		changePassword,
		colse
	} from "@/api/password.js"
	import {
		TOAST
	} from "@/utils/utils.js"
	export default {
		components: {
			CommonBack
		},
		data() {
			return {
				suffixIconStyle: {
					color: "#3F7BED"
				},
				passwordForm: {

				},
				show: false
			};
		},
		methods: {
			formValiate() {
				if (!this.passwordForm.password) {
					TOAST("请输入原密码")
					return false
				}
				if (!this.passwordForm.newPassword) {
					TOAST("请输入新密码")
					return false
				}
				if (!this.passwordForm.aginPassword) {
					TOAST("请再次输入密码")
					return false
				}
				if (this.passwordForm.newPassword !== this.passwordForm.aginPassword) {
					TOAST("两次密码输入不一致")
					return false
				}
				return true
			},
			back() {
				uni.switchTab({
					url: "./my"
				})
			},
			submit() {
				const valid = this.formValiate()
				if (valid) {
					changePassword({
						username: this.username,
						newPassword: this.passwordForm.newPassword,
						oldPassword: this.passwordForm.password
					}).then(res => {
						if (res.code === 200) {
							TOAST("密码修改成功")
							setTimeout(() => {
								uni.removeStorageSync("token")
								uni.navigateTo({
									url: "/pages/Login/Login"
								})
							}, 1000)
						}
					})
				}
			},
			confirm() {
				colse({
					username: this.username
				}).then(res => {
					if (res.code === 200) {
						this.show=false
						uni.removeStorageSync("token")
						uni.navigateTo({
							url: "/pages/Login/Login"
						})
					}
				})
			},
			closeUser() {
				this.show = true
			}
		},
		computed: {
			username() {
				return uni.getStorageSync("userInfo").username
			}
		}
	}
</script>

<style lang="scss" scoped>
	.safety-container {
		padding: 100rpx 60rpx;

		.user-info {
			margin-top: 60rpx;
			padding: 0rpx 40rpx;

			.info-item {
				margin-bottom: 40rpx;

				text {
					font-weight: 800;
					font-size: 28rpx;
					color: #3D5464;
				}

				.save {
					border-radius: 40rpx;
					box-shadow: 10rpx 10rpx 20rpx 2rpx rgba(151, 173, 225, 0.6);
					background: #F4F6F8;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					color: #999FAD;
				}
			}
		}
	}
</style>
